<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav{
            width:1210px;
            height:48px;
            background-color: #E8E7E3;
            margin:50px auto;
        }
        a{
            display: block;
            text-decoration: none;
            height:48px;
            color:#777;
            padding:0 39px;
        }
        .nav div{
           line-height: 50px;
           float:left;
        }
         .nav a:hover{
           background-color:rgb(32, 31, 31)
        }
        }
        .nav .one{
           width:150px;
           height:auto;
           line-height: 50px;
           float:left;
        }
        .nav .two{
           width:180px;
           height:auto;
           line-height: 50px;
           float:left;
           
        }
        .nav .three{
           width:180px;
           height:auto;
           line-height: 50px;
           float:left;
        }
        .nav .four{
           width:180px;
           height:auto;
           line-height: 50px;
           float:left;
        }
        .nav .five{
           width:160px;
           height:auto;
           line-height: 50px;
           float:left;
        }
        .nav .six{
           width:200px;
           height:auto;
           line-height: 50px;
           float:left;
        }
        .nav .seven{
           width:150px;
           height:auto;
           line-height: 50px;
           float:left;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="one"><a href="#">HTML/CSS</a></div>
        <div class="two"><a href="#">Blowser Side</a></div>
        <div class="three"><a href="#">Server Side</a></div>
        <div class="four"><a href="#">Programming</a></div>
        <div class="five"><a href="#">XML</a></div>
        <div class="six"><a href="#">Web Building</a></div>
        <div class="seven"><a href="#">Reference</a></div>
    </div>
</body>
</html>